<template>
  <div class="serchItem">
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline searchForm"
      ref="formData"
      style="width:100%"
    >
      <el-form-item style="margin-right:25px">
        <el-select v-model="formData.gameId" filterable placeholder="输入游戏名搜索">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gameName"
            :value="item.id"
            style="width:250px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="搜索玩家账号" prefix-icon="el-icon-search" v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item class="dataTime">
        <el-date-picker
          v-model="formData.startTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format=" yyyy-MM-dd HH:mm"
          format="yyyy-MM-dd HH:mm"
        ></el-date-picker>&nbsp;~
        <el-date-picker
          v-model="formData.endTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format=" yyyy-MM-dd HH:mm"
          format="yyyy-MM-dd HH:mm"
        ></el-date-picker>
      </el-form-item>
      <el-form-item class="amountMoney">
        <el-input placeholder="输入金额" v-model="formData.firstMoney"></el-input>&nbsp;~
        <el-input placeholder="输入金额" v-model="formData.secondMoney"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataSearch(formData)" class="dataSearch" plain>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="dataExport" @click="dataExport" v-show="commRemark !==false">
          数据导出
          <i class="el-icon-download el-icon--right"></i>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getgameName } from "@/api/user";
export default {
  props: ["type", "commRemark"],
  data() {
    return {
      formData: {
        username: "",
        gameId: "",
        startTime: "",
        endTime: "",
        firstMoney: "",
        secondMoney: "",
        page: 1,
        limit: 20
      },
      options: [],
      loading: false
    };
  },
  mounted() {
    getgameName().then(res => {
      this.options = res.data.list;
    });
  },
  methods: {
    // 查询
    dataSearch() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          // this.$store.commit("SET_SEARCH", this.formData);
          this.$emit("searchList", this.formData);
        }
      });
    },

    //导出的方法
    dataExport() {
      let params = {
        // type: this.type,
        gameId: this.formData.gameId,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        firstMoney: this.formData.firstMoney,
        secondMoney: this.formData.secondMoney
      };
      let url =
        "https://cpop.zaoyx.com/api/v1/adminrebate/order/export?type=" +
        this.type;
      Object.keys(params).forEach(function(key) {
        let value = params[key];
        if (value) {
          url += "&" + key + "=" + value;
        }
      });
      window.open(url);
    }
  }
};
</script>
<style lang="scss" scoped>
.serchItem {
  .amountMoney {
    .el-input {
      width: 80px;
    }
  }
}

.dataSearch {
  height: 30px;
  font-size: 12px;
  padding: 0 10px;
  margin-left: 10px;
}
.dataExport {
  background: #43425d;
  color: #fff;
  padding: 0 20px;
  margin: 0 30px 0 20px;
  height: 35px;
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 0;
}

.el-date-editor--datetimerange.el-input__inner {
  width: 355px;
  margin-top: 5.8px;
}
</style>